{extend name="public/baseLayuimini"}
{block name="title"}{/block}
{block name="css"}
<link rel="stylesheet" href="__LAYUIMINI__/lib/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
    body {margin: 10px;background: #fff;}
    .upload {width: 100px;height: 100px;border: 1px solid #ddd;background-repeat: no-repeat;background-size: 100% 100%;position: relative;}
    .upload .icon {width: 100%;height: 100%;display: flex;justify-content: space-evenly;align-items: center;font-size:26px;color: #999;position: absolute;left: 0;top: 0px;z-index:10;background-size: 100% 100%;background-repeat: no-repeat;}
    .fa-trash,.fa-repeat,.fa-search-plus {display: none}
    .upload .icon.uploaded:hover .fa-search-plus {display: block;}
    .upload .icon.uploaded:hover .fa-repeat {display: block;}
    .upload .icon.uploaded:hover .fa-trash {display: block;}
    .outbtn {
        position: absolute;
        right: -29px;
        top: 0;
        height: 38px;
        width: 30px;
        text-align: center;
        line-height: 38px;
        border: 1px solid #ddd;
        background: #fff;
        color: #333;
        cursor: pointer;
    }
    #file_name {line-height: 38px;font-size: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
    form {margin-top: 10px;padding-right: 10px;}
</style>
{/block}
{block name="main"}
<form class="layui-form" id="form" lay-filter="form">
    <input type="hidden" name="id">
    <input type="hidden" name="site_id">
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入标题" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">跳转地址</label>
            <div class="layui-input-inline">
                <input type="text" name="url" placeholder="以http://或https://开头" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">banner</label>
            <div class="layui-input-inline upload">
                <div class="icon">
                    <input type="hidden" name="img">
                    <i class="fa fa-cloud-upload"></i>
                    <i class="fa fa-trash"></i>
                    <i class="fa fa-repeat"></i>
                    <i class="fa fa-search-plus"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" class="layui-textarea" name="description"></textarea>
        </div>
    </div>
    <div class="layui-form-item" style="display: flex;justify-content: center;align-items: center;margin-top: 80px;">
        <button class="layui-btn" lay-submit="" lay-filter="demo2" style="width: 190px;">提交</button>
    </div>
</form>
{/block}
{block name="js"}
<script src="__LAYUIMINI__/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['layer','jquery','table','form','upload'],function(){
        var layer = layui.layer,$ = layui.jquery,table = layui.table,form = layui.form,丿;upload = layui.upload,id = '{$Request.param.id}'
        if(id) getData(id)
        //上传组件开始
        $(".fa-cloud-upload").click(function(){
            layer.open({
                type: 2,
                content: '/component/uploadImg',
                title:"图片编辑",
                area:['700px','450px'],
                btn:['确定'],
                id:'chooseImg',
                yes: (index, layero)=>{
                    let src = $(layero).find('iframe')[0].contentWindow.src.value
                    $(this).prev('input').val(src).parent().css({backgroundImage:"url("+src+")"}).addClass('uploaded')
                    $(this).hide()
                    layer.close(index)
                }
            });
        })
        $(".fa-trash").click(function(){
            $(this).parent().removeClass('uploaded').css({backgroundImage: ''}).find('input').val('').parent().find('.fa-cloud-upload').show()
        })
        $(".fa-repeat").click(function(){
            var _this = this
            layer.open({
                type: 2,
                content: '/component/uploadImg',
                title:"图片编辑",
                area:['700px','450px'],
                btn:['确定'],
                yes: (index, layero)=>{
                    let src = $(layero).find('iframe')[0].contentWindow.src.value
                    $(_this).parent().css({backgroundImage:"url("+src+")"}).addClass('uploaded').find('input').val(src)
                    layer.close(index)
                },
                cancel: function(){
                    $(_this).parent().removeClass('uploaded').find('.fa-cloud-upload').show()
                }
            });
        })
        $(".fa-search-plus").click(function(){
            var src = $(this).parent().css("backgroundImage").substring(5,($(this).parent().css("backgroundImage").length - 2))
            src = {
                "title": "", //相册标题
                "id": 123, //相册id
                "start": 0, //初始显示的图片序号，默认0
                "data": [   //相册包含的图片，数组格式
                    {
                        "src": src, //原图地址
                    }
                ]
            }
            layer.photos({
                photos: src,
                //0-6的选择，指定弹出图片动画类型，默认随机
                anim: 5
            });
        })
        //监听提交
        form.on('submit(demo2)', function (data) {
            data = data.field
            var reg=/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;
            if(data.url && !reg.test(data.url)){
                layer.msg('请输入正确的网址')
                return false;
            }
            if(!data.img){
                layer.msg('请上传banner图')
                return false
            }
            $.ajax({
                url:'/admin/editBanner',
                type:'post',
                data,
                success:res=>{
                    layer.confirm('编辑成功',{btn: ['继续添加','返回列表']},function(index){
                        window.location.href='/admin/editBanner'
                    },function(index){
                        parent.parent.location.reload(true);//刷新父级页面
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    })
                }
            })
            return false;
        });
        function getData(id){
            $.get('/admin/editBanner',{id},res=>{
                form.val('form',{
                    id:res.id,
                    title:res.title,
                    url:res.url,
                    img:res.img,
                    description:res.description,
                    site_id:res.site_id
                })
                $(".icon").css({backgroundImage:'url('+res.img+')'}).addClass('uploaded').find('.fa-cloud-upload').hide()

            })
        }
    })
</script>
{/block}